﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

<style>
    @($"#{Id}.ms-Stack") > * {
        text-overflow: ellipsis;
    }
    @(Reversed ? $"#{Id}.ms-Stack > *:not(:last-child)" : $"#{Id}.ms-Stack > *:not(:first-child)") {
        @(Horizontal ? $"margin-left:{columnGap}px;" : $"margin-top:{rowGap}px;")
    }

    body @($"#{Id}.ms-Stack") > *:not(.ms-StackItem) {
        flex-shrink: @(DisableShrink ? "0" : "1");
    }

    @($"#{Id}") .ms-Stack-inner > * {
        margin: @($"{0.5*rowGap}px {0.5*columnGap}px");
        text-overflow:ellipsis;
    }
    @($"#{Id}") .ms-Stack-inner > *:not(.ms-StackItem){
        flex-shrink: @(DisableShrink ? "0" : "1");
    }
    @(Horizontal ? $"#{Id}.ms-Stack-inner > * {{max-width:{(columnGap == 0  ? "100%" : $"calc(100% - {columnGap}px)")};}}" : $"#{Id}.ms-Stack-inner > * {{max-height:{(rowGap == 0  ? "100%" : $"calc(100% - {rowGap}px)")};}}")
</style>

@if (Wrap)
{
    <div id=@Id class=@($"ms-Stack {ClassName}") style=@(GetStyles() + " " + Style)>
        <div class="ms-Stack-inner" style=@GetInnerStyles()>
            @ChildContent
        </div>
    </div>
}
else
{
    <div id=@Id class=@($"ms-Stack {ClassName}") style=@(GetStyles() + " " + Style)>
        @ChildContent
    </div>
}

